<template>
  <div class="app-container">
    <HeaderTool  @selectDate="selectDate"  @exportExcel="exportExcel"></HeaderTool>
    <!--  卡片  -->
    <el-row :gutter="20">
      <el-col  v-for="(card, index) in cardList1" :key="index" style="margin-top: 20px;" :xs="24" :sm="12" :md="12" :lg="6">
        <el-card  class="padding-top-bottom-16 padding-left-right-6">
          <div class="flex justify-content-space-between">
            <div class="title">{{ card.title }}</div>
          </div>
          <div class="flex align-center  justify-content-space-between">
            <div class="count">￥{{ card.count }}</div>
            <div :class="card.status" class="analyze">{{ card.analyze }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!--  两列图表 -->
    <el-row :gutter="20">
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
        <EchartsComponent :options="chartOption1" class="charts-common flex-auto" style="margin-right: 10px;">
          <div style="position: absolute;top: -10px;right: 0px;z-index: 10">
            <el-button :type="costTrendBtn === 'Month' ? 'primary' : 'info'" @click="handCostTrendBtn('Month')">月</el-button>
            <el-button :type="costTrendBtn === 'Quarter' ? 'primary' : 'info'" @click="handCostTrendBtn('Quarter')">季</el-button>
            <el-button :type="costTrendBtn === 'Year' ? 'primary' : 'info'" @click="handCostTrendBtn('Year')">年</el-button>
          </div>
        </EchartsComponent>
      </el-col>
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
        <EchartsComponent :options="chartOption2" class="charts-common flex-auto" style="margin-left: 10px;">
          <div style="position: absolute;top: -10px;right: 0px;z-index: 10">
            <el-button type="info">月</el-button>
            <el-button type="info">季</el-button>
            <el-button type="primary">年</el-button>
          </div>
        </EchartsComponent>
      </el-col>
    </el-row>

    <div class="flex justify-content-space-between" style="margin-top: 20px">
      <EchartsComponent :options="chartOption3" class="charts-common flex-auto" style="margin-right: 10px;"></EchartsComponent>
   </div>

    <div class="grid-container">
      <el-card  v-for="(card, index) in cardList2" :key="index" class="padding-top-bottom-16 padding-left-right-6 flex-auto">
        <div class="flex justify-content-space-between">
          <div class="title">{{ card.title }}</div>
        </div>
        <div class="flex align-center  justify-content-space-between">
          <div class="count">￥{{ card.count }}</div>
          <div :class="card.status" class="analyze">{{ card.analyze }}</div>
        </div>
      </el-card>
    </div>

    <div class="flex justify-content-space-between two-col" style="gap: 20px;margin-top: 20px;margin-bottom: 20px">
      <el-card class="padding-top-bottom-16 padding-left-right-6 flex-auto">
          <div style="color: black;font-size: 18px;font-weight: bolder">剔除有关项说明</div>
          <div style="margin: 20px 0">延伸指标:用于反映剔除散装中药饮片、小包装中药饮片、中药配方颗粒剂、医疗机构中药制剂、罕见病用药收入以及纳入国家医保目录中谈判类药物收入后的住院次均费用增幅情况。具体剔除方式详见填报模板。</div>
      </el-card>
    </div>

    <CustomDialog v-model:analyzeDialogVisible="analyzeDialogVisible"></CustomDialog>
  </div>
</template>
<script setup>
import {ref} from 'vue';
import EchartsComponent from "@/components/ECharts/index.vue";
import HeaderTool from "@/components/HeaderTool/index.vue";
import {GetFeeRatio, getFeeTrendRatio} from "@/api/efficiency/costControl.js";
import DateUtils from "@/utils/utils.js";
const analyzeDialogVisible = ref(false);
// 选择历史时间
const selectDate = (time) => {
  console.log("选择的历史时间是:",time);
};
// 导出excel文件
const exportExcel = () => {
  console.log("导出excel文件")
  analyzeDialogVisible.value = true;
};
const costTrendBtn = ref('Month');
const cardList1 = ref([
  {
    title: '医疗收入增幅',
    count: 2847,
    num:"2179904",
    analyze: '2.8 %',
    status: 'increase'
  },
  {
    title: '门诊次均费用增幅',
    count: 1500,
    num:"2179904",
    analyze: '2.8 %',
    status: 'decrease'
  },
  {
    title: '门诊次均药品费用增幅',
    count: 1500,
    num:"2179904",
    analyze: '2.8 %',
    status: 'increase'
  },
  {
    title: '住院次均药品费用增幅',
    count: 1200,
    num:"2179904",
    analyze: '2.8 %',
    status: 'decrease'
  }
]);
const cardList2 = ref([
  {
    title: '删除有关项后医疗收入增幅',
    count: 2847,
    num:"2179904",
    analyze: '2.8 %',
    status: 'increase'
  },
  {
    title: '删除有关项后门诊次均费用增幅',
    count: 1500,
    num:"2179904",
    analyze: '2.8 %',
    status: 'decrease'
  },
  {
    title: '删除有关项后门诊次均药品费用增幅',
    count: 1500,
    num:"2179904",
    analyze: '2.8 %',
    status: 'increase'
  },
  {
    title: '删除有关项后住院次均费用增幅',
    count: 1200,
    num:"2179904",
    analyze: '2.8 %',
    status: 'decrease'
  },
  {
    title: '删除有关项后住院次均药品费用增幅',
    count: 1200,
    num:"2179904",
    analyze: '2.8 %',
    status: 'decrease'
  }
]);
const chartOption1 = ref({
    title: {
      text: '费用增长趋势分析'
    },
  tooltip: {
    trigger: 'axis',  // 触发类型为坐标轴
    axisPointer: {
      type: 'cross',   // 十字准星指示器
      snap: true, // 是否自动吸附到数据点（折线图常用，默认false）
    }
  },
    legend: {
      data: ['门诊次均费用', '住院次均费用']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '门诊次均费用',
        type: 'line',
        stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: '住院次均费用',
        type: 'line',
        stack: 'Total',
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    ]
  });
const chartOption2 = ref({
    title: {
      text: '费用构成占比',

    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'right',
      top:"center",
      data: ['药品费用', '诊疗费用', '检查费用', '手术费用', '其他费用']
    },
    series: [
      {
        name: '费用类别',
        type: 'pie',
        radius: ['40%', '70%'], // 设置为环形图
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: 'outside',
          formatter: '{b}: ￥{c} ({d}%)'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '30',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: true
        },
        data: [
          { value: 1048, name: '药品费用' },
          { value: 735, name: '诊疗费用' },
          { value: 580, name: '检查费用' },
          { value: 484, name: '手术费用' },
          { value: 300, name: '其他费用' }
        ]
      }
    ]
  });
const chartOption3 = ref({
    title: {
      text: '费用同比分析',

    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['2023年', '2024年']
    },
    xAxis: {
      type: 'category',
      data: ['门诊总费用', '住院总费用', '药品总费用', '诊疗总费用', '检查总费用'],
      axisLabel: {
        interval: 0,
      }
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 4000000,
      interval: 1000000,
      axisLabel: {
        formatter: '{value}'
      }
    },
    series: [
      {
        name: '2023年',
        type: 'bar',
        itemStyle: {
          color: '#5470c6'
        },
        data: [2200000, 3500000, 1800000, 900000, 1500000]
      },
      {
        name: '2024年',
        type: 'bar',
        itemStyle: {
          color: '#91cc75'
        },
        data: [2500000, 4000000, 2100000, 1200000, 1700000]
      }
    ]
});

const handCostTrendBtn = (buttonType) => {
  costTrendBtn.value = buttonType;
  feeTrendRatio({btnType:costTrendBtn.value}) // 获取费用增长趋势
};
// 费用相关服务
const getFeeRatio = async (params) => {
  let result = await GetFeeRatio(params);
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    cardList1.value[0].count = data.presentMedicalRevenue;
    cardList1.value[0].analyze = data.medicalRevenueRatio > 0 ? `↑${data.medicalRevenueRatio} %` : data.medicalRevenueRatio < 0 ? `↓${data.medicalRevenueRatio} %` : '较昨日持平';
    cardList1.value[0].status = data.medicalRevenueRatio > 0 ? 'increase' : data.medicalRevenueRatio < 0 ? 'decrease' : 'fair';

    cardList1.value[1].count = data.presentOPDRevenue;
    cardList1.value[1].analyze = data.opdRevenueRatio > 0 ? `↑${data.opdRevenueRatio} %` : data.opdRevenueRatio < 0 ? `↓${data.opdRevenueRatio} %` : '较昨日持平';
    cardList1.value[1].status = data.opdRevenueRatio > 0 ? 'increase' : data.opdRevenueRatio < 0 ? 'decrease' : 'fair';

    cardList1.value[2].count = data.presentOPDMedRevenue;
    cardList1.value[2].analyze = data.opdMedRevenueRatio > 0 ? `↑${data.opdMedRevenueRatio} %` : data.opdMedRevenueRatio < 0 ? `↓${data.opdMedRevenueRatio} %` : '较昨日持平';
    cardList1.value[2].status = data.opdMedRevenueRatio > 0 ? 'increase' : data.opdMedRevenueRatio < 0 ? 'decrease' : 'fair';

    cardList1.value[3].count = data.presentMedRevenue;
    cardList1.value[3].analyze = data.medRevenueRatio > 0 ? `↑${data.medRevenueRatio} %` : data.medRevenueRatio < 0 ? `↓${data.medRevenueRatio} %` : '较昨日持平';
    cardList1.value[3].status = data.medRevenueRatio > 0 ? 'increase' : data.medRevenueRatio < 0 ? 'decrease' : 'fair';
  }
}

// 获取费用增长趋势
const feeTrendRatio = async (params) => {
  let result = await getFeeTrendRatio(params);
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    if (result.status == 200 && result.data.code == 200){
      const seriesData1 = [];  // 门诊系列数据1
      const seriesData2 = [];  // 住院系列数据2
      const xAxis = [];
      data.forEach(item=>{
        seriesData1.push(Number(item.opdTrendRevenue)); // 门诊
        seriesData2.push(Number(item.inpatientTrendRevenue)); // 住院
        if (costTrendBtn.value == 'Month'){
          xAxis.push(`${item.month}月${item.day}日`);
        }
        if (costTrendBtn.value == 'Quarter'){
          xAxis.push(`第${item.quarter}季度`);
        }
        if (costTrendBtn.value == 'Year'){
          xAxis.push(`${item.month}月`);
        }
      })
       chartOption1.value.series[0].data = seriesData1;
       chartOption1.value.series[1].data = seriesData2;
       chartOption1.value.xAxis.data = xAxis;
    }
  }
}


// 加载界面所有数据
const getAllData = (time)=>{
  getFeeRatio(time); // 费用相关服务
 feeTrendRatio({btnType:costTrendBtn.value}) // 获取费用增长趋势
}

getAllData({
  starTime: DateUtils.formatDate(DateUtils.now(),"yyyy-MM-dd"),
  endTime: DateUtils.formatDate(DateUtils.now(),"yyyy-MM-dd")
});














</script>
<style lang='scss' scoped>
.app-container {
  height: calc(100vh - 84px);
  overflow-y: scroll;
  /* 针对 WebKit 内核浏览器（如 Chrome、Safari） */
  scrollbar-width: none;
  -ms-overflow-style: none;
  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 20px;
  }
  .el-card {
    border-radius: 13px;
    border: none;
  }
  .title {
    font-size: 16px;
    color: #858E98;
  }
  .icon {
    height: 20px;
  }
  .count {
    color: #464646;
    font-size: 30px;
    font-weight: 600;
    padding: 14px 0;
  }
  .samePeriod{
    color: #858E98;
    padding-right: 14px;
  }
  .analyze {
    font-size: 16px;
  }
  .increase {
    color: #00C94F;
  }
  .decrease {
    color: #FF3643;
  }
  .fair {
    color: #8F95A1;
  }
  .charts-common {
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    height: 300px;
  }

}
::v-deep .charts-common .el-button {
  height: fit-content;
  padding:5px;
}

</style>
